<template>
  <div class="box-border" id="app">
    <router-view :class="'animated time-1s '+animatedName"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      animatedName: ""
    };
  },
  created() {
    // if (!localStorage.getItem("token")) {
    //   this.$router.push({
    //     path: "../login"
    //   });
    // }
  },
  mounted() {
    let load = document.getElementById("loading");
    load.remove();
  },

  watch: {
    $route(to, from) {
      this.animatedName = "";
      if (from.meta.index === to.meta.index) {
        this.animatedName = "";
      }
      if (from.meta.index < to.meta.index) {
        this.animatedName = "fadeInRight";
      }
      if (from.meta.index > to.meta.index) {
        this.animatedName = "fadeInLeft";
      }
      document.title = to.meta.title;
    }
  }
};
</script>

<style>
#app {
  height: 100%;
}
</style>
